<template>
  <div class="category">
    <el-table :header-cell-style="headerStyle"
              :cell-style="rowStyle"
              :data="categoryListData"
              height="1000px"
              max-height="1000px"
              fit
              highlight-current-row
              border
              style="width: 100%">
      <el-table-column prop="imgUrl" width="200"
                       label="图片">
        <template #default="scope">
          <el-image :src="scope.row.imgUrl" style="width:180px;height:130px;object-fit:cover;"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="breedName"
                       label="品种名称" />
      <el-table-column prop="info" width="400"
                       label="详细介绍" />
      <el-table-column prop="categoryName"
                       label="品种类型" />
      <el-table-column prop="mainArea"
                       label="主要产地" />
    </el-table>
  </div>
</template>

<script>
import request from '../../../utils/request'
export default {
  data () {
    return {
      categoryListData: []
    }
  },
  async mounted () {
    this.getCategoryList()
  },
  methods: {
    async getCategoryList () {
      await request({
        method: 'get',
        url: '/plant/breed'
      }).then((response) => {
        console.log(response)
        this.categoryListData = response.data.records
      })
    },
    headerStyle () {
      return 'border:1px solid #ccc;'
    },
    rowStyle () {
      return 'border:1px solid #ccc;text-align:center;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;font-size: 14px;color: #000000;'
    }
  }
}
</script>

<style>
.category {
  margin-top: 20px;
}
.el-table {
  margin-top: 20px;
  border: 1px solid #ccc;
}
.el-table thead th {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
</style>
